<template>
  <div>
    <el-row>
      <el-col :span="20">
        <h2>首页</h2>
      </el-col>
      <el-col :span="4">
        <div v-html="loginInfo"></div>
        <router-link to="/shopCart">查看购物车</router-link><br>
        <router-link to="/shopOrder">我的订单</router-link>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2">
        商品名：
      </el-col>
      <el-col :span="4">
        <el-input v-model="paramObj.name"></el-input>
      </el-col>
      <el-col :span="2">
        起始日期：
      </el-col>
      <el-col :span="4">
        <el-input v-model="paramObj.startDate"></el-input>
      </el-col>
      <el-col :span="2">
        结束日期：
      </el-col>
      <el-col :span="4">
        <el-input v-model="paramObj.endDate"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="findByItem(1)">查询</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8" v-for="p in cutObj.records" :key="p.id">
        <img :src="'/project/img/'+p.photo" width="300" height="300"><br>
        <div>{{ p.name }}</div>
        <div>单价：{{ p.price }}</div>
        <div>售出数量：{{ p.soldNum }}</div>
        <el-button type="success" @click="$router.push({name:'ProductDetail',query:{id:p.id}})">查看</el-button>
        <el-button type="success" @click="buy(p.id)">购买</el-button>
      </el-col>
    </el-row>
    <el-pagination
        v-model:currentPage="cutObj.current"
        v-model:page-size="cutObj.size"
        background
        layout="prev, pager, next, jumper"
        :total="cutObj.total"
        @current-change="findByItem"
    />

  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      loginInfo: "",
      paramObj: {},
      cutObj: {},
    }
  },
  methods: {
    getLoginInfo() {
      axios.get("/project/user/getLoginInfo").then(resp => {
        if (resp.data == "") {
          this.loginInfo = "你好，请先<a href='/shopLogin'>登录</a>"
        } else {
          this.loginInfo = "欢迎光临," + resp.data.userName;
        }
      })
    },
    findByItem(pageNO) {
      this.paramObj.pageNO = pageNO;
      axios.get("/project/product/findByItem", {params: this.paramObj}).then(resp => {
        this.cutObj = resp.data;
      })
    },
    buy(pid) {
      axios.get("/project/cart/buy", {params: {productId: pid}})
          .then(resp => {
            if (resp.data == "ok") {
              this.$router.push("/shopCart");
            }
          })
    },
  },
  created() {
    this.getLoginInfo();
    this.findByItem(1);
  }
}
</script>

<style scoped>

</style>